<?php include 'application/views/header.php' ?>
<?php include 'application/views/left.php' ?>
<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>/public/css/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript" src="<?php echo base_url() ?>/public/js/jquery-ui-1.8.18.custom.min.js"></script>
<!-- BOX NEWS -->
<div class="content-box customer-list">
    <div class="title">
        <div class="label">Khách hàng</div>
        <div class="end-title"></div>
    </div>
    <!-- content -->
    <div class="list-customer-content"> 
        <?php if(count($Customers) > 0): ?>        
        <table width="100%" style="clear: both;">
            <tr>
                <td id="customer-info" valign="top">                          
                    <h3><?php echo $Customers[0]['CustomerName'] ?></h3>
                    <ul>
                        <li><strong>Địa chỉ</strong>: <?php echo $Customers[0]['CustomerAddress'] ?></li>
                        <li><strong>Điện thoại</strong>: <?php echo $Customers[0]['CustomerPhone'] ?></li>
                        <li><?php echo $Customers[0]['CustomerDescription'] ?></li>
                    </ul>
                </td>
                <td id="customer-video">
                    <iframe width="400" height="300" 
                        src="<?php echo $Customers[0]['Embed']  ?>" 
                        frameborder="0" allowfullscreen>
                    </iframe>
                </td>
            </tr>
        </table>
        
        <!-- tabs -->
        <table width="100%" id="other-customers">
            <tr>
                <td id="list-categories" width="200px" valign="top">
                    <ul>                        
                        <?php foreach($OptionCategories as $key => $value): ?>
                        <li cateId="<?php echo $key ?>" class="item-cate"><?php echo $value ?></li>
                        <?php endforeach; ?>
                    </ul>
                </td>
                <td valign="top">
                    <?php foreach($CustomersCates as $key => $cate): ?>
                    <ul class="cate-<?php echo $cate['CategoryId'] ?> list-customer-other" 
                        style="display: <?php echo ($key == 0 ? '' : 'none') ?>">
                        <?php foreach($cate['Customers'] as $customer): ?>
                        <li class="item-customer" customerId="<?php echo $customer['CustomerId'] ?>"><?php echo $customer['CustomerName'] ?></li>
                        <?php endforeach; ?>
                    </ul>
                    <?php endforeach; ?>
                </td>
            </tr>
        </table>
        <?php endif; ?>
    </div>
</div>

<?php include 'application/views/right.php' ?>
<?php include 'application/views/footer.php' ?>
<script>
    $('#list-categories > ul > li:first-child').addClass('active');
    $('#list-categories > ul > li').each(function(){
      
        $(this).click(function(){
            $('#list-categories > ul > li').each(function(){
                $(this).removeClass('active');
            });
       
            $(this).addClass('active');
            
            $('.list-customer-other').each(function(){
                $(this).hide();
            });
            $('.cate-' + $(this).attr('cateId')).show();
        });
    });
    $('#other-customers li.item-customer').each(function(){
        $(this).click(function(){
            //call ajax
            $.ajax({
                url: '/customer/detailAjax/' + $(this).attr('customerId'),
                success : function(data){
                    //set video
                    $('#customer-video').html('<iframe width="400" height="300" src="' + data.Customer.Embed+ '" frameborder="0" allowfullscreen></iframe>');
                    var html = '<td id="customer-info" valign="top">' +
                                '<h3>' + data.Customer.CustomerName + '</h3>' + 
                                '<ul>' +
                                    '<li><strong>Địa chỉ</strong>: ' + data.Customer.CustomerAddress +' </li>'+
                                    '<li><strong>Điện thoại</strong>: ' + data.Customer.CustomerPhone  + '</li>'+
                                    '<li>' +  data.Customer.CustomerDescription + '</li>'+
                                '</ul>'+
                            '</td>';
                    $('#customer-info').html(html);
                }
            })
        });
    });
</script>